import React, { Component } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import Link from 'umi/link';
import { Checkbox, Alert, Icon, Button } from 'antd';
import Login from '@/components/Login';
import prompt from '@/components/Prompt';
import DDlogin from './DDlogin';
import styles from './Login.less';
import router from 'umi/router';
import PasswdForm from './PasswdForm';
import { getQueryString } from '@/utils/common';
// import * as dd from 'dingtalk-jsapi';

const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
class LoginPage extends Component {
  state = {
    type: 'account',
    autoLogin: true,
    showPassPag: false,
    visible: false,
    STATE: 'LOGIN',
    gotoUrl: '',
  };
  // 登录的时候传 LOGIN    修改密码传 CHANGE
  // ddLoginurl = encodeURIComponent(`${window.location.origin}/server/api/login/ddLogin`);
  // appid =
  //   window.location.protocol === 'https:'
  //     ? 'dingoa3ylllifgbfn5humi'
  //     : window.location.hostname === '56.hichain.com'
  //       ? 'dingoawwqims8e9wos90le'
  //       : 'dingoaetrs4drsqkoehqxd';
  // LoginState = window.location.protocol === 'https:' ? 'HTTPSLOGIN' : 'LOGIN';
  // changeState = window.location.protocol === 'https:' ? 'CHANGE' : 'HTTPSCHANGE';


  componentDidMount() {
  }

  // onTabChange = type => {
  //   this.setState({ type });
  //   if (type === 'nailCode') {
  //     this.setState({
  //       STATE: 'LOGIN',
  //       gotoUrl: `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${
  //         this.appid
  //         }&response_type=code&scope=snsapi_login&state=${this.LoginState}_${Math.floor(
  //           Math.random() * 90000
  //         ) + 10000}&redirect_uri=${this.ddLoginurl}`,
  //     });
  //   }
  // };

  onGetCaptcha = () =>
    new Promise((resolve, reject) => {
      this.loginForm.validateFields(['mobile'], {}, (err, values) => {
        if (err) {
          reject(err);
        } else {
          const { dispatch } = this.props;
          dispatch({
            type: 'login/getCaptcha',
            payload: values.mobile,
          })
            .then(resolve)
            .catch(reject);
        }
      });
    });

  handleSubmit = (err, values) => {
    if (!err) {
      const { dispatch } = this.props;
      dispatch({
        type: 'login/login',
        payload: values,
        callback: res => {
         },
      });
    }
  };

  // changeAutoLogin = e => {
  //   this.setState({
  //     autoLogin: e.target.checked,
  //   });
  // };

  renderMessage = content => (
    <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
  );

  // handlePassword = e => {
  //   e.preventDefault();
  //   this.setState({
  //     showPassPag: true,
  //     STATE: 'CHANGE',
  //     gotoUrl: `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${
  //       this.appid
  //     }&response_type=code&scope=snsapi_login&state=${this.changeState}_${Math.floor(
  //       Math.random() * 90000
  //     ) + 10000}&redirect_uri=${this.ddLoginurl}`,
  //   });
  // };

  changeVal = val => {
    this.setState({
      showPassPag: false,
    });
  };

  render() {
    const { login, submitting } = this.props;
    const { type, autoLogin, showPassPag, visible, gotoUrl } = this.state;

    const options = {
      id: 'login-container',
      goto: gotoUrl,
      style: 'border:0;background-color:transparent;',
      width: '350px',
      height: '350px',
    };

    return (
      <div className={styles.main}>
        <Login
          defaultActiveKey={type}
          // onTabChange={this.onTabChange}
          onSubmit={this.handleSubmit}
          ref={form => {
            this.loginForm = form;
          }}
        >
          <Tab key="account" tab={formatMessage({ id: 'app.login.tab-login-credentials' })}>
            {login.status === 'error' &&
              login.type === 'account' &&
              !submitting &&
              this.renderMessage(formatMessage({ id: 'app.login.message-invalid-credentials' }))}
            <UserName
              name="loginName"
              placeholder={`${formatMessage({ id: 'app.login.userName' })}`}
              rules={[
                {
                  required: true,
                  message: formatMessage({ id: 'validation.userName.required' }),
                },
              ]}
            />
            <Password
              name="loginPwd"
              placeholder={`${formatMessage({ id: 'app.login.password' })}`}
              rules={[
                {
                  required: true,
                  message: formatMessage({ id: 'validation.password.required' }),
                },
              ]}
              onPressEnter={e => {
                e.preventDefault();
                this.loginForm.validateFields(this.handleSubmit);
              }}
            />
          </Tab>
          {type == 'account' && (
            <Submit loading={submitting}>
              <FormattedMessage id="app.login.login" />
            </Submit>
          )}
        </Login>
        {/* <div style={{
              position: 'fixed',
              bottom: '0px',
              right: '0px',
              color: '#002eff',
              padding:'18px 30px',
              background:'#f8fbfb',
              textDecoration: 'underline',
              cursor: 'pointer',
              fontSize:16,
        }}>
          <a title="点击查看操作手册" href="http://oos.hichain.com/static_download/订单在线系统操作手册.pdf" target="_blank">操作手册</a>
        </div> */}
      </div>
    );
  }
}

export default LoginPage;
